{% extends 'base-static.html' %}
{% load staticfiles %}

{% block css %}
    <link rel="stylesheet" href="{% static 'plugins/datatables/dataTables.bootstrap.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/layui/css/layui.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/layui/css/modules/layer/skin/layer.css' %}">

{% endblock %}

{% block content %}
    <section class="content-header">
        <h1>
            个人中心
        </h1>
        <ol class="breadcrumb">
            <li><a href="{% url 'system:index' %}"><i class="fa fa-dashboard"></i>首页</a></li>
            <li class="active">个人中心</li>
        </ol>
    </section>

    <section class="content">
        <div class="row">
            <div class="col-md-3">

                <!-- Profile Image -->
                <div class="box box-primary">
                    <div class="box-body box-profile">
                        <img class="profile-user-img img-responsive img-circle" src="{% static 'images/default.jpg' %}"
                             alt="User profile picture">

                        <h3 class="profile-username text-center">{{ request.user }}</h3>

                    </div>
                    <!-- /.box-body -->
                </div>
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">账户信息</h3>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <strong><i class="fa fa-user-circle margin-r-5"></i>账户名</strong>

                        <p class="text-muted" style="margin-top: 8px;">
                            {% if request.username %}
                                {{ request.user.username }}
                            {% else %}
                                {{ request.user.phone }}
                            {% endif %}
                        </p>

                        <hr>

                        <strong><i class="fa fa-user-md margin-r-5"></i>邮箱</strong>

                        <p class="text-muted" style="margin-top: 8px;">{{ request.user.email }}</p>

                        <hr>

                        <strong><i class="fa fa-pencil margin-r-5"></i>注册时间</strong>

                        <p class="text-muted" style="margin-top: 8px;">{{ request.user.date_joined }}</p>

                        <hr>

                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->

            </div>
            <!-- /.col -->
            <div class="col-md-9">
                <div class="nav-tabs-custom">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#activity" data-toggle="tab">修改密码</a></li>
                        <li><a href="#timeline" data-toggle="tab">修改邮箱</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="active tab-pane" id="activity">
                            <form class="form-horizontal" method="post" id="addForm">
                                {% csrf_token %}

                                <div class="box-body">
                                    <div class="form-group">
                                        <label for="inputEmail1" class="col-sm-2 control-label">原密码：</label>

                                        <div class="col-sm-8">
                                            <input type="password" class="form-control" name="origin_password"
                                                   id="inputEmail1"
                                                   placeholder="原密码">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="inputPassword2" class="col-sm-2 control-label">新密码：</label>

                                        <div class="col-sm-8">
                                            <input type="password" class="form-control" name="password"
                                                   id="inputPassword2"
                                                   placeholder="新密码">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="inputPassword3" class="col-sm-2 control-label">确认密码：</label>

                                        <div class="col-sm-8">
                                            <input type="password" class="form-control" name="confirm_password"
                                                   id="inputPassword3"
                                                   placeholder="确认密码">
                                        </div>
                                    </div>

                                </div>
                                <!-- /.box-body -->
                                <div class="box-footer">
                                    <button type="button" class="btn btn-info pull-right" id="confirm">确认</button>
                                </div>
                                <!-- /.box-footer -->
                            </form>
                        </div>
                        <div class="tab-pane" id="timeline">
                            <form class="form-horizontal" method="post" id="emailForm">
                                {% csrf_token %}

                                <div class="box-body">

                                    <div class="form-group">
                                        <label for="inputPassword2" class="col-sm-2 control-label">新邮箱：</label>

                                        <div class="col-sm-8">
                                            <input type="text" class="form-control" name="new_email"
                                                   id="inputPassword2"
                                                   placeholder="新邮箱">
                                        </div>
                                    </div>

                                </div>
                                <!-- /.box-body -->
                                <div class="box-footer">
                                    <button type="button" class="btn btn-info pull-right" id="email_confirm">确认修改
                                    </button>
                                </div>
                                <!-- /.box-footer -->
                            </form>
                        </div>
                    </div>
                    <!-- /.tab-content -->
                </div>
                <!-- /.nav-tabs-custom -->
            </div>
            <!-- /.col -->
        </div>
    </section>


{% endblock %}


{% block js %}
    <script src="{% static 'plugins/layui/layui.js' %}"></script>
    <script src="{% static 'plugins/layui/css/modules/layer/layer.js' %}"></script>
    <script>
        $('#confirm').click(function () {
            var data = $("#addForm").serialize();
            var csrftoken = Cookies.get('csrftoken');
            $.ajax({
                url: "{% url 'reset-change' %}",
                type: $('#addForm').attr('method'),
                data: data,
                cache: false,
                headers: {
                    "X-CSRFToken": csrftoken
                },
                success: function (resp) {
                    if (resp.code === 0) {
                        layer.alert(resp.msg, {icon: 1}, function (index) {
                            parent.layer.closeAll(); // 关闭所有弹窗
                            window.location.href = "{% url 'logout' %}";
                        });

                    } else {
                        layer.alert(resp.msg, {icon: 5}, function (index) {
                            parent.layer.closeAll();
                            window.location.reload();
                        });
                    }
                }
            })
        });

        $('#email_confirm').click(function () {
            var data = $('#emailForm').serialize();
            var csrftoken = Cookies.get('csrftoken');
            $.ajax({
                url: "{% url 'email-update' %}",
                type: 'post',
                data: data,
                headers: {
                    "X-CSRFToken": csrftoken
                },
                cache: false,
                success: function (resp) {
                    if (resp.code === 0) {
                        layer.alert(resp.msg, {icon: 1}, function (index) {
                            parent.layer.closeAll(); // 关闭所有弹窗
                            window.location.reload();
                        });

                    } else {
                        layer.alert(resp.msg, {icon: 5}, function (index) {
                            parent.layer.closeAll();
                        });
                    }
                }

            })

        })
    </script>
{% endblock %}

